<template>
  <div class="app-container">
    <!-- *************************************搜索区************************************* -->
    <!-- 分类 -->
    <el-form :model="queryParams" v-show="showSearch" ref="queryForm" size="small" :inline="true" label-width="90px">
      <el-form-item :label="$t('sku编号')" prop="skuNo">
        <el-input v-model="queryParams.skuNo" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('供应商名称')" prop="distrName">
        <el-input v-model="queryParams.distrName" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('中文名')" prop="skuNameCn">
        <el-input v-model="queryParams.skuNameCn" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('日文名')" prop="skuNameJp">
        <el-input v-model="queryParams.skuNameJp" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('库位号')" prop="spNo">
        <el-input v-model="queryParams.spNo" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('商品分类')" prop="distrName">
        <treeselect
          style="width: 240px"
          v-model="queryParams.classId"
          :options="menuOptions"
          :show-count="true"
          :placeholder="$t('请选择')"
        />
      </el-form-item>
      <el-form-item :label="$t('jan编码')" prop="janCode">
        <el-input v-model="queryParams.janCode" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('是否设置不可见')" prop="isVisible" label-width="120px">
        <el-select filterable v-model="queryParams.isVisible">
          <el-option :label="$t('是')" :value="1" />
          <el-option :label="$t('否')" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          {{ $t('搜索') }}
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          {{ $t('重置') }}
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 增删改查 -->
    <el-row :gutter="10" class="mb8">
      <!-- -->
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          :disabled="tableCheck.length == 0"
          v-hasPermi="['distribution:skuCloudGroup:setSkuCloudGroupBatch']"
          @click="handleSetBatchGroup"
        >
          {{ $t('批量设置分组') }}
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>
    <el-table
      @selection-change="(rows) => (tableCheck = rows)"
      :height="calTableHeight()"
      v-loading="loading"
      :data="tableData"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" type="index" :label="$t('序号')" width="50" />
      <el-table-column show-overflow-tooltip prop="skuNo" label="sku" align="center" />
      <el-table-column show-overflow-tooltip prop="spNo" :label="$t('库位号')" align="center" />
      <el-table-column show-overflow-tooltip prop="janCode" :label="$t('jan编码')" align="center" />
      <!-- 图片 -->
      <el-table-column  prop="combinationNameUrl" :label="$t('图片')" align="center">
        <template slot-scope="{ row }">
          <el-image
            fit="contain"
            style="width: 50px; height: 50px"
            :key="Math.random()"
            v-hover="row.imgUrl"
            :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="skuNameCn" :label="$t('中文名')" align="center" />
      <el-table-column show-overflow-tooltip prop="skuNameJp" :label="$t('日文名')" align="center" />
      <el-table-column show-overflow-tooltip prop="distrName" :label="$t('供应商')" align="center" />
      <el-table-column prop="price" :label="$t('不可见分组')" align="center">
        <template slot-scope="{ row }">
          <div>
            <div
              @click="grouping(item)"
              v-for="item in row.groupStrList"
              style="
                cursor: pointer;
                border: 1px solid #eee;
                padding: 3px;
                margin: 2px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ item.groupName }}
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column fixed="right" :label="$t('操作')" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" @click="handleSetGroup(row)">
            {{ $t('设置分组') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :pageSizes="[10, 50, 100, 150, 200, 300, 500]"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="relaod" ref="Skucontmoduler"></Skucontmoduler>
    <!-- 设置分组 -->
    <SetGroup :show.sync="setGroup.show" :formData="setGroup.formData" @getList="getList" />
    <!-- 设置批量分组 -->
    <SetBatchGroup
      :show.sync="setBatchGroup.show"
      :formData="setBatchGroup.formData"
      @getList="getList"
      :query="tableCheck"
    />
    <!-- xx分组卖家
    <GroupingDataList
      :show.sync="groupingData.show"
      :formData="groupingData.formData"
      @getList="getList"></GroupingDataList> -->

    <GroupSeller
      :show.sync="groupingData.show"
      @getList="getList"
      :formData="groupingData.formData"
      :title="groupingData.formData.groupName"
      :groupId="groupingData.formData.id"
      type="edit"
    />
  </div>
</template>

<script>
import { getSkuCloudGroupList } from '@/api/platform/cloudInvisibleGroupSku'
import GroupSeller from '@/components/groupSeller/index.vue'
import Skucontmoduler from '@/components/Skucontmoduler'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import GroupingDataList from './components/groupingDataList.vue'
import SetBatchGroup from './components/setBatchGroup.vue'
import SetGroup from './components/setGroup.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['multipleTable']?.doLayout())
  },
  name: 'AssemblyList',
  components: {
    Skucontmoduler,
    Treeselect,
    GroupingDataList,
    SetGroup,
    SetBatchGroup,
    GroupSeller,
  },
  data() {
    return {
      /**分组卖家 */
      groupingData: {
        show: false,
        type: '',
        formData: {},
      },
      setGroup: {
        show: false,
        formData: {},
      },
      setBatchGroup: {
        show: false,
        formData: {},
      },
      /**商品分类菜单树选项 */
      menuOptions: [],

      /**点击的表格项 */
      clickedRows: [],
      showSearch: false,

      tableData: [],
      tableCheck: [],
      /**数据总条数 */
      total: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  watch: {
    'queryParams.pageNum': function (val) {
      this.clickedRows = []
    },
  },
  created() {
    this.getList()
    this.$getSkuClassList().then((res) => {
      this.menuOptions = res.menuOptions
    })
  },
  methods: {
    handleSetBatchGroup() {
      this.setBatchGroup.show = true
    },
    handleSetGroup(row) {
      this.setGroup.formData = row
      this.setGroup.show = true
    },
    /**分组 */
    grouping(data) {
      this.groupingData.formData = JSON.parse(JSON.stringify(data))
      this.groupingData.show = true
    },

    relaod() {
      this.getList()
    },
    handleEdits(row) {
      if (!row.skuId) {
        row.skuId = row.id
      }
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformationSeller')
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getSkuCloudGroupList(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.total = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__cell {
  padding: 0;
}

.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;

      &:hover {
        & + .goods-img-big {
          display: block;
        }
      }
    }

    &-big {
      // display: none;
      position: absolute;
      z-index: 100;
      top: -180px;
      left: 0;
      transform: translate(0, 70px);
      width: 200px;
      height: 200px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
